<template>
  <div class="edit-coupon" :style="{height:page_height+'px'}">

    <!--S主体-->
    <cube-scroll ref="scroll">
      <cube-form ref="form" id="form" :model="data" :schema="form" :options="{layout:'classic'}" @submit.prevent="submit">
      </cube-form>
    </cube-scroll>
    <!--E主体-->

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
import photo from '../../public/photo.js';
export default {
  name: 'edit-coupon',   //卡券编辑新增
  data(){
    var self = this;
    return {
      page_height:store.state.height,
      doing:'add',
      store_id:0,  //门店id
      coupon_id:0,  //卡券id
      //S表单
      data:{
        name:'',   //卡券名称
        images:[],
        text_type:store.state.coupon_classify[1].text,  //卡券类型
        type:store.state.coupon_classify[1].value,
        face_value:'',   //卡券面值
        minus_value:'',   //满多少减多少
        rule:''  //卡券规则
      },
      form:{
        fields:[
          {
            label:'卡券名称',
            type:'input',
            modelKey:'name',
            props: {
              placeholder: '卡券名称'
            },
            rules:{
              required:true,
              max:50
            },
            events:{
              blur(){
                window.scroll(0,0);
              }
            }
          },
          {
            type: 'upload',
            modelKey: 'images',
            props:{
              multiple:true,
              max:6,
              action:{
                target:sysinfo.url,
                fileName:'file',
                data:{pages:'file',doing:'upload'}
              },
              processFile(file,next){
                photo.get({
                  file
                })
                        .then((resFile)=>{
                          next(resFile);
                        })
                        .catch(error=>console.log(error));
              }
            },
            label: '卡券奖品相关图片',
            events: {
                'file-success':(event)=>{
                    event.url = event.response.url;
                    event.path = event.response.path;
                },
                'file-removed':(event)=>{
                    self.$http.post(sysinfo.url,Qs.stringify({
                        pages:'file',
                        doing:'remove',
                        path:event.path
                    }))
                        .then((res)=>{
                            console.log(res);
                        })
                        .catch(error=>console.log(error));
                }
            }
          },
          {
            label:'卡券类型',
            type:'select',
            modelKey:'text_type',
            props: {
              options:self.selectClassData()
            },
            events:{
              change(a,b){
                var value = store.state.coupon_classify[b+1].value;
                self.data.type = value;
                self.typeChange(value);
              }
            },
            rules: {
              required: true
            }
          },
          {
            label:'卡券面值(元)',
            type:'input',
            modelKey:'face_value',
            props: {
              placeholder: '卡券面值(元)'
            },
            rules:{
              type:'number',
              pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            },
            events:{
              blur(){
                window.scroll(0,0);
              }
            }
          },
          {
            label:'卡券规则',
            type:'textarea',
            modelKey:'rule',
            props: {
              placeholder: '卡券规则',
              maxlength:10000000000000,
              autoExpand:true,
              indicator:{
                remain:false
              }
            },
             rules:{
                required:true
             },
             events:{
               blur(){
                 window.scroll(0,0);
               }
             }
          },
          {
            type: 'submit',
            label: '创建卡券',
            props:{
              primary:true
            }
          }
        ]
      },
      //E表单
    }
  },
  computed:{
    send_data(){
        var data = {
            name:this.data.name,
            type:this.data.type,
            cost:{face_value:this.data.face_value},
            rule:this.data.rule,
        }
        if(this.data.images.length > 0){
            var images = [];
            this.data.images.forEach((item)=>{
                images.push(item.path);
            });
            data.images = images;
        }else{
            data.images = [];
        }
        if(this.data.type == 'mj'){
            data.cost.minus_value = this.data.minus_value;
        }
        if(this.doing == 'add'){
            data.store_id = this.store_id;
            data.uniacid = sysinfo.uniacid;
        }
        data.cost = JSON.stringify(data.cost);
        return data;
    }
  },
  created(){
    var {doing,coupon_id} = this.$route.params;
    this.doing = doing;
    this.coupon_id = coupon_id;
    common.store()
            .then((res)=>{
              if(store.state.store.position_id != 0){
                if(!store.state.store.authority.includes('coupon')){
                  this.$router.replace('/');
                  return;
                }
              }
              if(res) this.store_id = res.store_id;
            })
            .catch(error=>console.log(error));
    if(this.doing == 'edit') this.find();
    this.form.fields[this.form.fields.length - 1].label = this.doing == 'add' ? '创建卡券' : '编辑卡券';
    this.typeChange(this.data.type);
  },
  mounted(){
    this.$nextTick(()=>{
      setTimeout(()=>{
        this.page_height = document.documentElement.clientHeight;
      },100);
    });
  },
  methods:{
    //获取修改的卡券信息
    find(){
      this.$http.post(sysinfo.url,Qs.stringify({
          pages:'storeCoupon',
          doing:'find',
          coupon_id:this.coupon_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  var data = res.data.data;
                  this.typeChange(data.type);
                    this.data = {
                      name:data.name,
                      images:data.images,
                      type:data.type,
                      text_type:this.valueToText(data.type),
                      face_value:data.face_value,
                      rule:data.rule
                    }
                    if(data.minus_value) this.data.minus_value = data.minus_value;
                }
              })
              .catch(error=>console.log(error));
    },
    //通过卡券类型的value返回text
    valueToText(type){
      for(let i=0;i<store.state.coupon_classify.length;i++){
        if(store.state.coupon_classify[i].value == type){
          return store.state.coupon_classify[i].text;
        }
      }
    },
    //返回select选择器组件所需数据
    selectClassData(){
      var data = [];
      store.state.coupon_classify.forEach((item,index)=>{
        if(index > 0){
          data.push(item.text);
        }
      });
      return data;
    },
    //卡券类型改变
    typeChange(value){
      this.data.face_value = '';
      this.data.minus_value = '';
      var form_data = {}
      if(this.form.fields.length > 6){
        this.form.fields.splice(4,1);
      }
      switch(value){
        case 'dj':
          form_data = {
            label:'卡券面值',
            type:'input',
            modelKey:'face_value',
            props: {
              placeholder: '卡券面值'
            },
            rules:{
              required:true,
              type:'number',
              pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            }
          }
          break;
        case 'mj':
          form_data = {
            label:'满多少(元)?',
            type:'input',
            modelKey:'face_value',
            props: {
              placeholder: '满多少(元)?'
            },
            rules:{
              required:true,
              type:'number',
              pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            }
          }
          break;
        case 'dh':
          form_data = {
            label:'兑换奖品(名称)',
            type:'input',
            modelKey:'face_value',
            props: {
              placeholder: '兑换奖品(名称)'
            },
            rules:{
              required:true,
            }
          }
          break;
        case 'zk':
          form_data = {
            label:'折扣',
            type:'input',
            modelKey:'face_value',
            props: {
              placeholder: '折扣'
            },
            rules:{
              required:true,
              type:'number',
              min:0.01,
              max:9.99,
              pattern:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            }
          }
          break;
        case 'rc':
          form_data = {
            label:'场地(区域)',
            type:'input',
            modelKey:'face_value',
            props: {
              placeholder: '如：电影院、溜冰场、发布会等等'
            },
            rules:{
              required:true
            }
          }
          break;
      }
      this.form.fields.splice(3,1,form_data);
      if(value == 'mj'){
        this.form.fields.splice(4,0,{
          label:'减多少(元)?',
          type:'input',
          modelKey:'minus_value',
          props: {
            placeholder: '减多少(元)?'
          },
          rules:{
            required:true,
            type:'number',
            min:0.01,
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
          }
        });
      }
    },
    //提交
    submit(){
      var self = this;
      var data = {
          pages:'storeCoupon',
          doing:this.doing,
          data:this.send_data
      }
      if(this.doing == 'edit'){
          data.coupon_id = this.coupon_id;
      }
      this.$http.post(sysinfo.url,Qs.stringify(data))
          .then((res)=>{
              if(res.data.status == 'success'){
                  this.$createToast({
                      time: 1000,
                      txt: self.doing == 'add' ? '创建成功' : '修改成功',
                      type:'correct'
                  }).show();
                  if(this.doing == 'add'){
                      this.doing = 'edit';
                      this.form.fields[this.form.fields.length - 1].label = '修改卡券';
                      this.coupon_id = res.data.data;
                  }
              }else{
                  this.$createToast({
                      time: 1000,
                      txt: self.doing == 'add' ? '创建失败' : '修改失败',
                      type:'correct'
                  }).show();
              }
          })
          .catch(error=>console.log(error));
    }
  }
}
</script>

<style scoped>
 .edit-coupon{
   padding:0 10px;
   box-sizing: border-box;
 }
</style>

<style lang="stylus" rel="stylesheet/stylus">
  .cube-form
    background: none;
  .cover_mark
    position: absolute;
    z-index:10;
    width:30px;
    height:30px;
    background: red;
</style>
